<template>
  <!-- 使用示例
  <nav-bar :title="'筛选工单'" :hideback="true" :customBack="customBack">
    <template #right>
      <view class="navbar-right-box">
        <text class="flex-1 ml-5 mr-5 color-fff" @click="closePopup">关闭</text>
      </view>
    </template>
  </nav-bar>
  -->
  <view class="nav-bar-wrapper">
    <!-- 顶部状态栏 -->
    <status-bar></status-bar>

    <view class="nav-bar-box flex items-center bgc-fff" :style="navBarStyle">
      <view class="left" v-if="!hideback">
        <uni-icons
          type="arrow-left"
          color="#fff"
          size="36"
          @click="goBack"
        ></uni-icons>
      </view>
      <view class="title">
        <text>{{ title }}</text>
      </view>
      <view :class="rightClass">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, useSlots } from 'vue';
import {
  getStatusBarHeight,
  getTitleBarHeight,
  getNavBarHeight,
} from '@/common/js/system.js';

// 定义 props
const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
  hideback: {
    type: Boolean,
    default: false,
  },
  backgroundColor: {
    type: String,
    default: '#1082c1',
  },
  customBack: {
    type: [Function, null],
    default: null,
  },
});
const emit = defineEmits(['customBack']);

// 获取插槽
const slots = useSlots();

// 计算属性
const rightClass = computed(() => {
  return slots.right ? 'right with-content' : 'right no-content';
});

// 计算导航栏样式
const navBarStyle = computed(() => {
  return {
    backgroundColor: props.backgroundColor,
    // height: `${getNavBarHeight()}px`,
    // paddingTop: `${getStatusBarHeight()}px`
  };
});

// 方法
const goBack = (event) => {
  if (props.customBack) {
    props.customBack();
  } else {
    uni.navigateBack();
  }
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.nav-bar-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
}

.nav-bar-box {
  height: $nav-height;
}

.left {
  width: auto;
  padding: 0 0 0 10rpx;
}

:deep(.right) {
  width: auto;
  padding: 0 16rpx;
  &.with-content {
    .top-btn {
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: calc($nav-height * 0.6);
      padding: 0 6rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      border: 1px solid #fff;
      margin-left: 14rpx;
    }
  }
  &.no-content {
    width: 0;
  }
}

.title {
  flex: 1;
  text-align: left;
  padding-left: 10rpx;
  color: #fff;
  font-size: 32rpx;
}
</style>
